<template>
	<view class="content">
		<view style="width:300px; font-size: 12px; background-color: #2C405A; color: #CCCCCC;height: 900px;overflow-y: scroll; position: absolute;">
			<ul>
				<template v-for="item in list">
					<li @click="selectFile(item)">{{item}}</li>
				</template>
			</ul>
		</view>
		<view style="position: absolute; left: 300px;">
			<view style="line-height: 20px;">
				token:<input style="width: 100px; font-size: 12px;" disabled="disabled" v-model="token" placeholder="token" />
				server:<select @change="getFiles(false)" v-model="select_server"><template v-for="item in server">
						<option :value="item">{{item}}</option>
					</template></select>
				file:<input style="width: 300px; font-size: 12px;" v-model="select_file" />
				AroundLines:<input style="width: 20px;" type="number" v-model="around_lines" />
				LastLines:<input style="width: 50px;" type="number" v-model="last_lines" />
				Keyword:<input v-model="keyword" />
				<button @click="query">查询</button>
				<button @click="getToken(true)">刷新token</button>
				<button @click="getFiles(true)">刷新files</button>
			</view>
			<view style="font-size: 12px; line-height: 20px; overflow: scroll; height: 860px; width: 1600px;">
				<pre>
				{{ output }}					
				</pre>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				server: ["", "oc-test","octet","oc"],
				select_server: '',
				around_lines: 1,
				last_lines: 1000,
				keyword: '',
				list: [],
				select_file: '',
				output:''
			}
		},
		onLoad() {
			this.getToken(false)
		},
		methods: {
			getToken(forceFresh) {
				var _this = this
				this.common.requestAPI(this.common.config.API_GET_TOKEN, 'GET', {
					forceFresh: forceFresh
				}, '正在获取token', function(res) {
					_this.token = res.data.token
				});
			},
			getFiles(forceFresh = false) {
				var _this = this;
				if (this.select_server.length < 1) return false;
				this.common.requestAPI(this.common.config.API_LIST_FILES, 'GET', {
					token: this.token,
					forceFresh: forceFresh,
					serverName: this.select_server
				}, '正在获取files', function(res) {
					_this.list = res.data.files
				});
			},
			selectFile(file) {
				this.select_file = file
			},
			query() {
				var _this = this;
				if (this.select_server.length < 1) return false;
				if (this.select_file.length < 1) return false;
				var data = {
					token: this.token,
					serverName: this.select_server,
					fileName: this.select_file,
					aroundLines: this.around_lines,
					lastLines: this.last_lines,
					keyword: this.keyword
				}
				this.common.requestAPI(this.common.config.API_QUERY, 'GET', data, '正在查询', function(res) {
					_this.output = res.data.output
				});
			}
		}
	}
</script>

<style scoped>
	input,
	select,
	button {
		border-bottom: #2C405A 1px solid;
		display: inline-block;
		line-height: 30px;
		margin-top: 10px;
		margin-right: 20px;
	}
	pre {
		-moz-user-select: text;
		-webkit-user-select:text;
		-ms-user-select:text;
		user-select:text;
	}
</style>
